<template>
  <el-dialog class="custom-dialog" v-model="dialogVisible" :title="title" :width="width" :style="{ height: height }" :top="top" draggable :before-close="handleClose" :destroy-on-close="true" :close-on-click-modal="false" @open="open">
    <slot> </slot>
    <template v-if="showFooter" #footer>
      <span class="dialog-footer">
        <template v-if="formRefs.length > 0">
          <el-button v-if="!editable" @click="edit">编辑</el-button>
          <el-button @click="cancel">取消</el-button>
        </template>
        <el-button type="primary" @click="confirm"> {{ theConfirmText }} </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="CustomDialog">
import { ref, onMounted, computed, watch, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
import { stores } from '@/stores/index.js'

const dialogVisible = defineModel('dialogVisible')
const props = defineProps({
  top: {
    type: String,
    default: '10vh'
  },
  title: {
    type: String,
    default: '数据详情'
  },
  //是否显示头部边框
  headerBorder: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '80%'
  },
  height: {
    type: String,
    default: '780px'
  },

  showFooter: {
    type: Boolean,
    default: true
  },
  // 是否显示编辑按钮
  editable: {
    type: Boolean,
    default: false
  },
  confirmText: {
    type: String,
    default: '确定'
  }
})
const userStore = stores.useUserStore()
const instance = getCurrentInstance()
let validPass = false //表单验证是否通过
//预置的表单提交参数
// let params = { dwdm: userStore.userInfor.dwdm, userName: userStore.userInfor.xm }
let params = {}
const emit = defineEmits(['confirm', 'handleClose'])
const formRefs = ref([])
const theConfirmText = ref(props.confirmText)

onMounted(() => {
  // console.log('dialog-mounted')
})
const cancel = () => {
  dialogVisible.value = false
}
const edit = () => {
  //获取设置了ref的表单
  let formRefs = getFormRefs()
  formRefs.forEach((ref) => {
    instance.parent.refs[ref].setEditable(true)
  })
}
//确定按钮事件
const confirm = async () => {
  let formRefs = getFormRefs()
  console.log(formRefs)

  //获取并验证处于编辑状态的表单
  let editableFormRefs = formRefs.filter((ref) => instance.parent.refs[ref].isEditable)
  if (editableFormRefs.length > 0) {
    for (let i = 0; i < editableFormRefs.length; i++) {
      await valideForm(editableFormRefs[i])
    }
    if (validPass) {
      emit('confirm', JSON.parse(JSON.stringify(params)))
      validPass = false
      // dialogVisible.value = false
    }
  } else {
    // 非表单或表单处于非编辑状态.
    console.log('非表单验证提交')
    // dialogVisible.value = false
    emit('confirm')
  }
}
//获取弹框中设置了ref属性的表单
const getFormRefs = () => {
  return Object.keys(instance.parent.refs).filter((ref) => instance.parent.refs[ref]?.$refs?.ruleFormRef)
}
//验证表单
const valideForm = async (ref) => {
  await instance.parent.refs[ref].$refs.ruleFormRef.validate((valid) => {
    if (!valid) {
      validPass = false
      console.log('验证失败')
      return
    } else {
      validPass = true
      params = Object.assign(params, instance.parent.refs[ref].form)
      console.log('验证成功')
    }
  })
}

const handleClose = () => {
  dialogVisible.value = false
  emit('handleClose')
}
const open = () => {}
</script>

<style lang="scss">
.custom-dialog {
  .el-dialog__header {
    border-bottom: var(--el-border);
    padding-bottom: 12px;
    // background-color: #f8f8f8;
  }
  .el-dialog__body {
    padding: 10px;
  }
  .el-dialog__title {
    padding-left: 12px;
    position: relative;
    font-size: 20px;
    &::before {
      display: block;
      content: '';
      position: absolute;
      top: 1px;
      width: 3px;
      height: 20px;
      border-radius: 10px;
      background-color: var(--el-color-primary);
    }
  }
  .el-dialog__close {
    font-size: 25px;
  }
  .el-dialog__footer {
    text-align: center;
    .el-button span {
      font-size: 16px !important;
    }
  }
}
</style>
